<template>
  <div class="home">
    <el-menu :default-active="activeIndex" class="el-menu-demo" router mode="horizontal" @select="handleSelect">
      <el-menu-item index="/">井类型</el-menu-item>
      <el-menu-item index="/AlertMessageList">告警信息</el-menu-item>
     </el-menu>
    <div class="line"></div>
    <el-row>
        <el-table :data="bookList" style="width: 100%" border>
          <el-table-column prop="id" label="序号" min-width="100">
            <template slot-scope="scope"> {{ scope.row.pk }} </template>
          </el-table-column>
          <el-table-column prop="oil_collecting_room" label="集油间" min-width="100">
            <template slot-scope="scope"> {{ scope.row.fields.oil_collecting_room }} </template>
          </el-table-column>
          <el-table-column prop="well_name" label="井号" min-width="100">
            <template slot-scope="scope"  @click="handleClick(scope.row)"> {{ scope.row.fields.well_name }} </template>
          </el-table-column>
         <el-table-column prop="order_time" label="接单时间" >
            <template slot-scope="scope"> {{ scope.row.fields.order_time }} </template>
          </el-table-column>
          <el-table-column prop="duration_time" label="持续时间" >
            <template slot-scope="scope"> {{ scope.row.fields.duration_time }} </template>
          </el-table-column>
          <el-table-column prop="alarm_name" label="告警名称" >
            <template slot-scope="scope"> {{ scope.row.fields.alarm_name }} </template>
          </el-table-column>
          <el-table-column prop="event_description" label="事件说明" >
            <template slot-scope="scope"> {{ scope.row.fields.event_description }} </template>
          </el-table-column>
          <el-table-column prop="work_arrangement" label="工作安排" >
            <template slot-scope="scope"> {{ scope.row.fields.work_arrangement }} </template>
          </el-table-column>
          <el-table-column prop="disposer" label="处置人" >
            <template slot-scope="scope"> {{ scope.row.fields.disposer }} </template>
          </el-table-column>
          <el-table-column prop="disposal_measures" label="处置措施" >
            <template slot-scope="scope"> {{ scope.row.fields.disposal_measures }} </template>
          </el-table-column>
          <el-table-column prop="estimated_completion_time" label="预计完成时间" >
            <template slot-scope="scope"> {{ scope.row.fields.estimated_completion_time }} </template>
          </el-table-column>
          <el-table-column prop="implementation_person" label="落实人" >
            <template slot-scope="scope"> {{ scope.row.fields.implementation_person }} </template>
          </el-table-column>
          <el-table-column prop="implementation_status" label="落实状态" >
            <template slot-scope="scope"> {{ scope.row.fields.implementation_status }} </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">查看井信息</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'WellCondition',
  data () {
    return {
      input: '',
      bookList: [],
      activeIndex: '2',
      activeIndex2: '2'
    }
  },
  mounted: function() {
      this.showBooks()
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleEdit(index, row) {
      console.log(index,row)
      this.$router.push('/Well/' + row.fields.well_name )  //将你的跳转写在这里。
    },
    showBooks(){
      this.$http.get(this.setData.resUrl + '/get_alert_message_list/')
        .then((response) => {
            var res = JSON.parse(response.bodyText)
            console.log(res)
            if (res.status == 0) {
              this.bookList = res['alert_message_list']
            } else {
              this.$message.error('查询告警信息失败')
              console.log(res['msg'])
            }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>